<template>
  <ga-link size="mini" @click="goToDetailPage" class="text" :hoverable="false">{{ record.name || '-' }}</ga-link>
</template>

<script setup>
import { defineProps, toRefs } from 'vue'
import { useRouter } from 'vue-router'
const props = defineProps({
  record: {
    required: true,
    default: '-'
  },
})
const router = useRouter()
const { record } = toRefs(props)
// 详情
const goToDetailPage = () => {
  const path = `/containerSystem/detail/overview`
   // systemId=1933&type=0&systemName=bookdemo&score=&listSystemType=null&listSystemName=&listSystemNodeName=
  const {name, type, id } = record.value
  router.push({
    path: path,
    query: { name, systemId: id, systemName:name, type }
  })
}
</script>

<style lang="scss" scoped>
:deep(.garco-link) {
  padding: 0;
}

.text {
  border-radius: 0;
}

.text:hover {
  border-bottom: 1px solid #0F5EF7;
}
</style>
